<style rel="stylesheet/scss" lang="scss" scoped>
.container-wrapper {
  position: relative;
  .pdf-out {
    position: absolute;
    right: 40px;
    top: 20px;
    z-index: 99999999;
  }
  .app-container {
    padding: 0;
    padding-top: 30px;
  }
}
.pdf-containier {
  overflow-x: scroll;
  width: 100%;
  #pdf-doc {
    width: 1280px;
    padding: 40px;
    h3 {
      text-align: center;
      padding-top: 30px;
    }
  }
}
</style>
<template>
  <div class="container-wrapper">
    <el-button type="warning" :disabled="exportLoading" class="pdf-out" @click="getPdf('文件导出','pdf-doc')" v-if="pageType=='export'">导出</el-button>
    <el-tabs type="card" v-model="activeTab" v-if="pageType!='export'">
      <!-- PBS  -->
      <el-tab-pane label="PBS" name="PBS">
        <detail-pbs :modelPbsId="modelPbsId"></detail-pbs>
      </el-tab-pane>
      <!-- PCC  -->
      <el-tab-pane label="PCC" name="PCC">
        <detail-pcc :modelPbsId="modelPbsId"></detail-pcc>
      </el-tab-pane>
      <el-tab-pane label="PPD" name="PPD">
        <el-tabs v-model="activePPD">
          <el-tab-pane label="结构设计" name="structure">
            <detail-ppd></detail-ppd>
          </el-tab-pane>
          <el-tab-pane label="美工设计" name="ui">
            <detail-ui></detail-ui>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
      <el-tab-pane label="PGF" name="PGF">
        <detail-pgf category="3"></detail-pgf>
      </el-tab-pane>
      <el-tab-pane label="Cert." name="Cert">
        <detail-cert type="sale"></detail-cert>
      </el-tab-pane>
    </el-tabs>
    <div class="pdf-containier" v-if="pageType=='export'">
      <div id="pdf-doc" ref="pdfdom">
        <h3>PBS</h3>
        <detail-pbs :modelPbsId="modelPbsId"></detail-pbs>
        <h3 id="PCC">PCC</h3>
        <detail-pcc :modelPbsId="modelPbsId"></detail-pcc>
        <h3>PPD-结构设计</h3>
        <detail-ppd></detail-ppd>
        <h3>PPD-美工设计</h3>
        <detail-ui></detail-ui>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  name: 'ModelDetail',
  components: {
    'detail-pcc': () => import('./components/detailPcc'),
    'detail-ppd': () => import('@/views/packing/design/components/detail'),
    'detail-ui': () => import('@/views/packing/design/components/detailUi'),
    'detail-pgf': () => import('@/views/product/model/components/detailPgf'),
    // 'detail-pgf': () => import('@/views/sale/model/components/detailPgf'),
    'detail-pbs': () => import('./components/detailPbs'),
    'detail-cert': () => import('@/components/CertDetail')
  },
  data() {
    return {
      modelPbsId: null,
      activeTab: 'PBS',
      activePPD: 'structure',
      exportLoading: false,
      pageType: null
    };
  },
  computed: {
    ...mapGetters(['elements', 'language', 'dict'])
  },
  created() {},
  activated() {
    this.modelPbsId = this.$route.query.modelPbsId.toString();
    this.activeTab = 'PBS';
    this.activePPD = 'structure';
    this.exportLoading = true;
    this.pageType = this.$route.query.type;
    if (this.pageType === 'export') {
      setTimeout(() => {
        this.setPdfPage();
        this.exportLoading = false;
      }, 6000);
    }
  },
  methods: {
    setPdfPage() {
      // let arr_dom = [];
      // page = 1;
      const pdf = document.getElementById('pdf-doc');
      const pageHeight = pdf.offsetWidth / 592.28 * 841.89;

      const preOrder = node => {
        let childs = node.children,
          item;
        for (let i = 0; i < childs.length; i++) {
          item = childs[i];
          if (item.nodeType === 1) {
            // 递归先序遍历子节点
            const offsetTop =
              item.getBoundingClientRect().top -
              pdf.getBoundingClientRect().top;
            const height = item.getBoundingClientRect().height + offsetTop;
            if (Math.floor(offsetTop / pageHeight) != Math.floor(height / pageHeight)) {
              if (item.className.indexOf('el-collapse-item__header') !== -1 || item.children.length == 0) {
                const paddingTop = Math.ceil(offsetTop / pageHeight) * pageHeight - offsetTop + 10;
                console.log('item', item, paddingTop);
                item.setAttribute('style', 'padding-top: ' + paddingTop + 'px');
              }
              preOrder(item);
            }
          }
        }
      };
      preOrder(pdf);
    }
  }
};
</script>
